<template>
  <div style="text-align: center">
    <el-transfer
      v-model="value4"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :titles="['Source', 'Target']"
      :button-texts="['到左边', '到右边']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      :data="data"
      @change="handleChange"
    >
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}<el-tag type="{ option.type }">{{ option.devicename }}</el-tag></span>
      <el-button slot="left-footer" class="transfer-footer" size="small">操作</el-button>
      <el-button slot="right-footer" class="transfer-footer" size="small">操作</el-button>
    </el-transfer>
  </div>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>

import { deviceListInfo } from '@/api/user'

export default {
  data() {
    const generateData = _ => {
      const data = []
      console.log('dddddddddddd')

      // for (let i = 1; i <= 15; i++) {
      //   data.push({
      //     key: i,
      //     label: `备选项 ${ i }`,
      //     disabled: i % 4 === 0
      //   });
      // }
      return data
    }
    return {
      data: generateData(),
      deviceData: [],
      value: [1],
      value4: [1],
      renderFunc(h, option) {
        return '<span>{ option.key } - { option.label }<el-tag type="{option.type }">{ option.devicename }</el-tag></span>'
      }
    }
  },
  created: function() {
    var deviceData = []
    deviceListInfo(
      { device_state: 1 }
    ).then((res) => {
      console.log('ssddsds')
      if (res.code == '20000') {
        // forEach
        var bank = undefined
        var devicename = undefined
        var state = undefined

        res.data.forEach(function(item, index) {
          bank = undefined
          devicename = undefined
          state = undefined

          switch (item.attribute) {
            case 1:
              bank = '农'
              break
            case 2:
              bank = '邮'
              break
            case 3:
              bank = '工'
              break
            case 4:
              bank = '中'
              break
            case 5:
              bank = '兴'
              break
            case 6:
              bank = '恒'
              break
            case 7:
              bank = '东'
              break
            case 8:
              bank = '库'
              break
            case 0:
              bank = '企'
              break
            default :
              bank = '无'
              break
          }

          switch (item.type) {
            case 0:
              devicename = '注册机'
              break
            case 1:
              devicename = '柱状考勤机'
              break
            case 2:
              devicename = '4G平板考勤机'
              break
            case 3:
              devicename = '测温平板'
              break
            case 4:
              devicename = '普通平板'
              break
            case 5:
              devicename = '海思平板'
              break
            case 6:
              devicename = '老版平板'
              break
            case 7:
              devicename = '其他'
              break
            default :
              devicename = '其他'
              break
          }

          deviceData.push({
            key: item.key,
            label: devicename,
            type: devicename,
            bank: bank,
            disabled: item.key % 4 === 0
          })

          // item 就是当日按循环到的对象
          // index是循环的索引，从0开始
        }

        )
        console.log(deviceData)
        this.data = this.deviceData
        // this.$message('提交成功!')
      } else {
        // this.$message({
        //   message: '提交失败，请联系管理员!',
        //   type: 'warning'
        // })
      }
    })
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }

  }
}
</script>
